<template>
  <div class="layout">
    <div class="header">通知公告</div>
    <div class="dataList">
      <div class="item" @click="toDetail(item.informId)" v-for="item in bulletinList" :key="item.informId">
        <div class="info">
          <div class="title">{{ item.title }}</div>
          <div class="createTime">{{ item.createTime }}</div>
        </div>
        <div class="addressor">公告人: {{ item.addressor }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reqBulletin } from '@/api/student/index';
import { ref, onMounted } from 'vue';
import { useStudentStore } from '@/stores/modules/studentStore';
import { useRouter } from 'vue-router';

const studentStore = useStudentStore();
const bulletinList = ref([]);
const router = useRouter();

const getBulletinList = async () => {
  const res = await reqBulletin(studentStore.studentNum);
  if (res.status === '200') {
    res.dataList.forEach(el => {
      bulletinList.value.push(el);
    });
  }
};
onMounted(() => {
  getBulletinList();
});

const toDetail = id => {
  router.push({ name: 'student-bulletin-detail', params: { id: id } });
};
</script>

<style scoped lang="scss">
.layout {
  width: 100vw;
  height: 100vh;
  background-color: #f7f7f7;
  font-size: 16rem;
  color: #333;
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;

  .header {
    width: 100%;
    height: 5%;
    background-color: #23a0f3;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .dataList {
    margin-top: 5%;
    width: 100%;
    height: 90%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #666;
    gap: 10rem;

    .item {
      display: flex;
      justify-content: space-between;
      width: 95%;
      height: 10%;
      border: 1px solid #ccc;
      border-radius: 5rem;

      >div {
        padding: 10rem;
      }

      .info {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      }

      .addressor {
        display: flex;
        flex-direction: column;
        justify-content: end;
      }
    }
  }
}
</style>
